<template>
  <div class="yxinmiralce-main">
    <Card dis-hover style="background-color: rgb(242, 242, 242);border: none">
      <Row :gutter="24" style="width: 90%;margin-left: auto;margin-right: auto">
        <Col :span="16">
          <div class="video-title">
            <h1 class="tit">SpringSecurity框架教程-Spring Security+JWT实现项目级前端分离认证授权-B站最通俗易懂的Spring Security课程</h1>
          </div>
          <div id="mse" class="video-body">

          </div>
          <div>
            <Card :shadow="true">
              <span class="bp-svgicon danmu-setting-parent" @mouseover="danMuFontSettingItem.isShow = true">
                <div class="video-danmu-setting" v-show="danMuFontSettingItem.isShow"
                     @mouseover="danMuFontSettingItem.isShow = true" @mouseleave="danMuFontSettingItem.isShow=false">
                <!-- 选择弹幕字号 -->
                <div class="yxinmiracle-player-mode-selection-row">
                  <div class="row-title">字号</div>
                  <div class="row-selection">
                    <div class="selection-span js-action " data-type="fontsize" id="small" name="fontsize_selector"
                         @click="changeFontSize('small')">
                      <span class="selection-name" name="fontsize_selector">小</span>
                    </div>
                    <div class="selection-span js-action active " data-type="fontsize" id="default"
                         name="fontsize_selector" @click="changeFontSize('default')">
                      <span class="selection-name" name="fontsize_selector">标准</span>
                    </div>
                  </div>
                </div>
                  <!-- 选择弹幕模式 -->
                <div class="yxinmiracle-player-mode-selection-row">
                  <div class="row-title">模式</div>
                  <div class="row-selection">
                    <div class="selection-span js-action active " id="scroll" @click="changeMode('scroll')"
                         data-type="mode" name="mode_selector" data-value="1">
                      <span class="selection-icon" name="mode_selector"><span class="bp-svgicon"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path
                        d="M23 3H5a4 4 0 00-4 4v14a4 4 0 004 4h18a4 4 0 004-4V7a4 4 0 00-4-4zM11 9h6a1 1 0 010 2h-6a1 1 0 010-2zm-3 2H6V9h2v2zm4 4h-2v-2h2v2zm9 0h-6a1 1 0 010-2h6a1 1 0 010 2z"></path></svg></span></span><span
                      class="selection-name" name="mode_selector">滚动</span></div>
                    <div class="selection-span js-action " id="top" @click="changeMode('top')" data-type="mode"
                         name="mode_selector" data-value="5">
                      <span
                        class="selection-icon" name="mode_selector"><span class="bp-svgicon"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path
                        d="M23 3H5a4 4 0 00-4 4v14a4 4 0 004 4h18a4 4 0 004-4V7a4 4 0 00-4-4zM9 9H7V7h2v2zm4 0h-2V7h2v2zm4 0h-2V7h2v2zm4 0h-2V7h2v2z"></path></svg></span></span><span
                      class="selection-name" name="mode_selector">顶部</span></div>
                    <div class="selection-span js-action " id="bottom" @click="changeMode('bottom')" data-type="mode"
                         name="mode_selector" data-value="4">
                      <span class="selection-icon" name="mode_selector">
                        <span class="bp-svgicon">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
                          <path
                            d="M23 3H5a4 4 0 00-4 4v14a4 4 0 004 4h18a4 4 0 004-4V7a4 4 0 00-4-4zM9 21H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z">
                          </path>
                          </svg>
                        </span>
                      </span>
                      <span class="selection-name" name="mode_selector">底部</span>
                    </div>
                  </div>
                </div>
                  <!--颜色模式 -->
                <div class="yxinmiracle-player-mode-selection-row">
                  <div class="row-title">颜色</div>
                  <div class="row-selection">
                    <ColorPicker v-model="danMuFontSettingItem.setting.color" :transfer="true" alpha/>
                  </div>
                </div>
              </div>
                <svg xmlns="http://www.w3.org/2000/svg" id="svg" style="height: 24px!important;" viewBox="0 0 22 22">
                  <path
                    d="M16.5 8c1.289 0 2.49.375 3.5 1.022V6a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h7.022A6.5 6.5 0 0116.5 8zM7 13H5a1 1 0 010-2h2a1 1 0 010 2zm2-4H5a1 1 0 010-2h4a1 1 0 010 2z"></path><path
                  d="M20.587 13.696l-.787-.131a3.503 3.503 0 00-.593-1.051l.301-.804a.46.46 0 00-.21-.56l-1.005-.581a.52.52 0 00-.656.113l-.499.607a3.53 3.53 0 00-1.276 0l-.499-.607a.52.52 0 00-.656-.113l-1.005.581a.46.46 0 00-.21.56l.301.804c-.254.31-.456.665-.593 1.051l-.787.131a.48.48 0 00-.413.465v1.209a.48.48 0 00.413.465l.811.135c.144.382.353.733.614 1.038l-.292.78a.46.46 0 00.21.56l1.005.581a.52.52 0 00.656-.113l.515-.626a3.549 3.549 0 001.136 0l.515.626a.52.52 0 00.656.113l1.005-.581a.46.46 0 00.21-.56l-.292-.78c.261-.305.47-.656.614-1.038l.811-.135A.48.48 0 0021 15.37v-1.209a.48.48 0 00-.413-.465zM16.5 16.057a1.29 1.29 0 11.002-2.582 1.29 1.29 0 01-.002 2.582z"></path>
                </svg>
              </span>

              <!--弹幕输入框-->
              <Input placeholder="Enter something..." size="small"
                     style="width: 30%;position: absolute;top: 10px;margin-left: 2px"/>
              <Button size="small" type="info" style="position: absolute;top: 10px;margin-left: 293px">发送</Button>
            </Card>
          </div>

          <div class="video-toolbar report-wrap-module report-scroll-module">
            <div class="ops">
              <span title="点赞数2493" class="like">
                <Icon class="ivu-icon" type="ios-happy"/>
                2493
              </span>
              <span title="收藏人数3861" class="collect on">
               <Icon class="ivu-icon" type="md-star" />
                3861
              </span>
            </div>
            <div class="rigth-btn">
              <div class="note-btn note-btn__blue">
                <Icon type="ios-create" />
                笔记
              </div>
            </div>
          </div>
        </Col>
        <!-- 右边弹幕列表 -->
        <Col :span="8">
          <!-- services info 展示机构的信息 -->
          <div>
            <div class="up-info report-wrap-module report-scroll-module">
              <div class="u-face">
                <a href="" class="u-face__avatar avatar-loaded">
                  <div class="bili-avatar" style="width: 48px;height:48px;transform: translate(0px, 0px);">
                    <img class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                         src="https://pec-1300659502.cos.ap-guangzhou.myqcloud.com/avaet" alt="">
                    <span
                      class="bili-avatar-icon bili-avatar-right-icon  bili-avatar-icon--personal bili-avatar-size-48"></span>
                  </div>
                </a>
              </div>
              <div class="up-info_right">
                <div class="name">
                  <div class="username is_vip" style="color:#a1c2fc;">
                    程序员小信
                  </div>
                </div>
                <div class="desc">
                  大厂开发小伙，用编程做点有趣的事 ❤️ 我做的编程资源网 code-nav.cn 知识星球 dogyupi.com
                </div>
              </div>
            </div>
          </div>
          <!--弹幕列表-->
          <div>
            <Card>
              <p slot="title" class="yxinmiralce-episode-title">
                <Icon type="ios-film-outline"></Icon>
                弹幕列表
                <span class="yxinmiralce-episode">共11122条弹幕</span>
                <span class="yxinmiralce-episode-right">
                  <span @click="danMuIsShow = 1" v-if="danMuIsShow===0" class="yxinmiralce-episode-title danmu-menu">展开<Icon
                    type="md-arrow-dropdown"/></span>
                  <span @click="danMuIsShow = 0" v-if="danMuIsShow===1" class="yxinmiralce-episode-title danmu-menu">关闭<Icon
                    type="md-arrow-dropup"/></span>
                </span>
              </p>
              <div class="danmu-box " v-show="danMuIsShow">
                <div class="animated fadeInDown">
                  <Table :columns="danMuColumns" :data="danMuData" size="small"></Table>
                </div>
              </div>
            </Card>
          </div>

          <!--选集-->
          <div style="margin-top: 20px">
            <Card>
              <p slot="title" class="yxinmiralce-episode-title">
                <Icon type="ios-film-outline"></Icon>
                选集列表
                <span class="yxinmiralce-episode">({{videoItem.curEpisode}}/{{videoItem.totalEpisode}})</span>
                <span class="yxinmiralce-episode-right">
                  <span class="yxinmiralce-episode-title">自动连播</span>
                   <i-switch size="small" style="margin-left: 10px;line-height: 14px"></i-switch>
                </span>
              </p>
              <div class="yxinmiralce-list-box">
                <a @click="changeVideo(item.episodeNum)" v-for="item in boxList" :key="item.episodeNum">
                  <Card class="yxinmiracle-list-item">
                    <div class="clickitem">
                      <div class="link-content">
                        <img v-if="curEpisodeNum===item.episodeNum" src="//s1.hdslb.com/bfs/static/jinkela/video/asserts/playing.gif">
                        <span class="page-num">P{{item.episodeNum}}. </span>
                        <span class="part">{{item.title}}</span>
                      </div>
                      <div class="duration">{{item.videoTime}}</div>
                    </div>
                  </Card>
                </a>
              </div>
            </Card>
          </div>
        </Col>
      </Row>
    </Card>
  </div>

</template>

<script>
  import 'xgplayer'
  import HlsJsPlayer from 'xgplayer-hls.js'

  const cityOptions = ['上海', '北京', '广州', '深圳']
  export default {
    name: 'Video',
    data () {
      return {
        danMuFontSettingItem: {
          isShow: false,
          setting: {
            fontSize: '20px',
            mode: 'scroll',
            color: 'rgba(34,236,236,0.5)',
          }
        },
        curEpisodeNum: 1,
        danMuIsShow: 0, // 弹幕列表是否展开
        videoItem: {
          curEpisode: 1,
          totalEpisode: 41
        },
        boxList: [
          {
            episodeNum: 1,
            title: '课程特点',
            videoTime: '07:11'
          },
          {
            episodeNum: 2,
            title: '简介',
            videoTime: '03:22'
          },
          {
            episodeNum: 3,
            title: '入门案例准备工作',
            videoTime: '05:53'
          },
          {
            episodeNum: 3,
            title: '入门案例准备工作',
            videoTime: '05:53'
          },
          {
            episodeNum: 3,
            title: '入门案例准备工作',
            videoTime: '05:53'
          },
          {
            episodeNum: 3,
            title: '入门案例准备工作',
            videoTime: '05:53'
          },
          {
            episodeNum: 3,
            title: '入门案例准备工作',
            videoTime: '05:53'
          },
          {
            episodeNum: 3,
            title: '入门案例准备工作',
            videoTime: '05:53'
          },
          {
            episodeNum: 3,
            title: '入门案例准备工作',
            videoTime: '05:53'
          }
        ],
        danMuColumns: [
          {
            title: '时间',
            key: 'videoTime',
            align: 'center',
            width: 100
          },
          {
            title: '弹幕内容',
            key: 'danMuContent',
            ellipsis: true
          },
          {
            title: '发送时间',
            key: 'sentDanMuTime',
            align: 'center',
            width: 120
          }
        ],
        danMuData: [
          {
            videoTime: '02:58',
            danMuContent: '太强了，三连支持Up',
            sentDanMuTime: '12-22 09:19',
          },
          {
            videoTime: '3:00',
            danMuContent: '这不比某狂牛逼吗入门案例准备工作入门案例准备工作入门案例准备工作入门案例准备工作入门案例准备工作入门案例准备工作',
            sentDanMuTime: '03-03 19:44',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          },
          {
            videoTime: '01:58',
            danMuContent: 'Hello',
            sentDanMuTime: '03-03 02:09',
          }
        ]
      }
    },
    methods: {
      changeVideo (episodeNum) {
        // episodeNum表示的是当前的P数
        this.curEpisodeNum = episodeNum
      },
      changeFontSize (fontSize) {
        if (fontSize === 'small') {
          this.danMuFontSettingItem.setting.fontSize = '16px'
          document.getElementById('small').classList.add('active')
          document.getElementById('default').classList.remove('active')
        } else {
          this.danMuFontSettingItem.setting.fontSize = '20px'
          document.getElementById('small').classList.remove('active')
          document.getElementById('default').classList.add('active')
        }
      },
      changeMode (mode) {
        if (mode === 'scroll') {
          this.danMuFontSettingItem.setting.mode = 'scroll'
          document.getElementById('scroll').classList.add('active')
          document.getElementById('top').classList.remove('active')
          document.getElementById('bottom').classList.remove('active')
        } else if (mode === 'top') {
          this.danMuFontSettingItem.setting.mode = 'top'
          document.getElementById('scroll').classList.remove('active')
          document.getElementById('top').classList.add('active')
          document.getElementById('bottom').classList.remove('active')
        } else {
          this.danMuFontSettingItem.setting.mode = 'bottom'
          document.getElementById('scroll').classList.remove('active')
          document.getElementById('top').classList.remove('active')
          document.getElementById('bottom').classList.add('active')
        }
      },
    },
    mounted () {
      let player = new HlsJsPlayer({
        id: 'mse',
        url: 'http://localhost:8080/a.m3u8',
        videoInit: true, // 初始化显示视频首帧
        fluid: true, // 流式布局
        danmu: {
          mouseControl: true,
          comments: [  //弹幕数组
            {
              duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
              id: '1', //弹幕id，需唯一
              start: 3000, //弹幕出现时间，毫秒
              txt: '长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕', //弹幕文字内容
              style: {  //弹幕自定义样式
                color: '#ff9500',
                fontSize: '20px',
                border: 'solid 1px #ff9500',
                borderRadius: '50px',
                padding: '5px 11px',
                backgroundColor: 'rgba(255, 255, 255, 0.1)'
              },
            }
          ],
          area: {  //弹幕显示区域
            start: 0, //区域顶部到播放器顶部所占播放器高度的比例
            end: 1 //区域底部到播放器顶部所占播放器高度的比例
          },
        },
        thumbnail: {
          pic_num: 18,
          width: 160,
          height: 90,
          col: 1,
          row: 1,
          urls: [
            'https://cdn.yxinmiracle.com/video/image-001.jpg',
            'https://cdn.yxinmiracle.com/video/image-002.jpg',
            'https://cdn.yxinmiracle.com/video/image-003.jpg',
            'https://cdn.yxinmiracle.com/video/image-004.jpg',
            'https://cdn.yxinmiracle.com/video/image-005.jpg',
            'https://cdn.yxinmiracle.com/video/image-006.jpg',
            'https://cdn.yxinmiracle.com/video/image-007.jpg',
            'https://cdn.yxinmiracle.com/video/image-008.jpg',
            'https://cdn.yxinmiracle.com/video/image-009.jpg',
            'https://cdn.yxinmiracle.com/video/image-010.jpg',
            'https://cdn.yxinmiracle.com/video/image-011.jpg',
            'https://cdn.yxinmiracle.com/video/image-012.jpg',
            'https://cdn.yxinmiracle.com/video/image-013.jpg',
            'https://cdn.yxinmiracle.com/video/image-014.jpg',
            'https://cdn.yxinmiracle.com/video/image-015.jpg',
            'https://cdn.yxinmiracle.com/video/image-016.jpg',
            'https://cdn.yxinmiracle.com/video/image-017.jpg',
            'https://cdn.yxinmiracle.com/video/image-018.jpg',
          ],
          isShowCoverPreview: false
        },
        miniplayer: true,
        miniplayerConfig: {
          bottom: 200,
          right: 0,
          width: 320,
          height: 180
        },
        playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
        pip: true //打开画中画功能
      })
    }
  }
</script>

<style scoped>
  /*@import "../../assets/css/video.css";*/

  /deep/ .xgplayer-playbackrate {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }

  /deep/ .xgplayer-pip {
    margin-right: 20px !important;
  }

  /deep/ .xgplayer-volume {
    margin-right: 10px !important;
  }

  .yxinmiralce-main {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .video-body {
    margin-top: 20px;
  }

  .up-info {
    box-sizing: border-box;
    height: 96px;
    padding-top: 15px;
    padding-bottom: 12px;
    display: flex;
  }

  .up-info .u-face {
    float: left;
    width: 48px;
    height: 48px;
    position: relative;
  }

  .up-info .u-face .avatar-loaded {
    background-color: transparent;
  }

  .up-info .u-face .u-face__avatar {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f4f5f7;
  }

  a, a:active, a:hover, a:link, a:link:hover, a:visited {
    text-decoration: none;
  }

  .bili-avatar {
    display: block;
    position: relative;
    background-image: url();
    background-size: cover;
    border-radius: 50%;
    margin: 0;
    padding: 0;
  }

  .bili-avatar-img-radius {
    border-radius: 50%;
  }

  .bili-avatar-img {
    border: none;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
  }

  .bili-avatar-face {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
  }

  .bili-avatar * {
    margin: 0;
    padding: 0;
  }

  .bili-avatar .bili-avatar-size-60, .bili-avatar .bili-avatar-size-50, .bili-avatar .bili-avatar-size-48 {
    width: 18px;
    height: 18px;
    bottom: -1px;
  }

  .bili-avatar-icon--personal {
    background-image: url();
  }

  .up-info .up-info_right {
    width: 256px;
    height: 96px;
    margin-left: 13px;
    float: left;
  }

  .up-info .up-info_right .name {
    font-size: 14px;
    color: #00a1d6;
  }

  .up-info .up-info_right .desc {
    margin-top: 4px;
    width: 317px;
    font-size: 12px;
    line-height: 16px;
    height: 16px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .danmaku-box {
    margin-bottom: 20px;
  }

  .danmaku-wrap {
    min-height: 46px;
    background: #f4f4f4;
  }

  .yxinmiralce-episode {
    font-size: 12px;
    color: #999999;
    line-height: 16px;
  }

  .yxinmiralce-episode-title {
    font-family: "PingFang SC" !important;
    line-height: 20px;
  }

  .yxinmiralce-episode-right {
    font-size: 14px;
    color: #999999;
    line-height: 16px;
    position: absolute;
    right: 16px;
    top: 14px;
  }

  .yxinmiralce-list-box {
    padding: 0 6px;
    max-height: 300px;
    overflow: auto;
  }

  .yxinmiracle-list-item {
    border-top: none;
    border-right: none;
    border-left: none;
    color: #6d757a;
    margin: 5px 0;
    transition: all 0.3s;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
  }

  .yxinmiracle-list-item a {
    display: block;
    color: #212121;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }

  /deep/ .ivu-card-body {
    padding: 10px !important;
  }

  .clickitem {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
  }

  .link-content {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    overflow: hidden;
  }

  .page-num {
    margin-right: 10px;
  }

  .multi-page .cur-list .list-box li .part {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  }

  .multi-page .cur-list .list-box li .duration {
    font-size: 12px;
    color: #757575;
    justify-self: flex-end;
  }

  .link-content img {
    height: 14px;
    width: 14px;
    font-size: 14px;
    margin-right: 5px;
  }

  .danmu-menu {
    cursor: pointer;
  }

  .danmu-box {
    padding: 0 6px;
    max-height: 400px;
    overflow: auto;
  }

  #svg:hover {
    cursor: pointer;
    color: #00a1d6;
    background: transparent;
    fill: #00a1d6;
  }

  .video-danmu-setting {
    z-index: 600;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.58);
    top: -300px;
    height: 300px;
    width: 220px;
  }

  .yxinmiracle-player-mode-selection-row {
    position: relative;
    min-height: 22px;
    margin: 10px 20px;
    width: 176px;
    line-height: 22px;
    font-size: 12px;
  }

  .row-title {
    text-align: left;
    color: #fff;
    line-height: 16px;
  }

  .row-selection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 8px -8px 0 0;
  }

  .selection-span[data-type=fontsize] {
    width: 84px;
    margin-bottom: 8px;
  }

  .selection-span {
    position: relative;
    cursor: pointer;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    margin-right: 8px;
    background: hsla(0, 0%, 100%, .2);
    font-size: 12px;
  }

  .selection-span.active {
    color: #fff;
    background: #00a1d6;
  }

  .selection-span[name=mode_selector] {
    background: transparent;
    margin: -4px 22px 0 0;
    color: hsla(0, 0%, 100%, .8);
    fill: hsla(0, 0%, 100%, .8);
  }

  .selection-span.active[name=mode_selector] {
    color: #00a1d6;
    background: transparent;
    fill: #00a1d6;
  }

  .video-toolbar {
    position: relative;
    margin-top: 16px;
  }

  .video-toolbar {
    line-height: 30px;
    height: 28px;
    font-size: 14px;
    color: #505050;
    border-bottom: 1px solid #e5e9f0;
    padding-bottom: 12px;
  }

  .video-toolbar .ops {
    float: left;
    position: relative;
    height: 24px;
    user-select: none;
  }

  .video-toolbar .ops > span {
    width: 92px;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    white-space: nowrap;
    color: #505050;
    position: relative;
  }

  .video-toolbar .ops > span i {
    font-size: 28px;
    vertical-align: top;
    margin-right: 6px;
    width: 28px;
    height: 28px;
    color: #757575;
    transition: color 0.3s;
  }

  [class^=ivu-icon] {
    display: inline-block;
    font-style: normal;
    vertical-align: baseline;
    text-align: center;
    text-transform: none;
    line-height: 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .video-toolbar .ops > span:hover i, .video-toolbar .ops > span.on i {
    color: #0096c7;
  }

  .video-toolbar .ops > span:hover, .video-toolbar .ops > span.on {
    color: #00a1d6;
    background: transparent;
    fill: #00a1d6;
  }

  .video-toolbar .rigth-btn {
    float: right;
    display: flex;
    align-items: center;
  }

  .video-toolbar .note-btn__blue {
    border: 1px solid #00a1d6;
    color: #00a1d6;
    transition: 0.3s;
  }
  .video-toolbar .note-btn {
    position: relative;
    width: 71px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
  }

  .tit{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

</style>
